<script setup lang="ts">
import {Border} from "../../types/Border";
import {PropType, ref} from "@vue/runtime-core";
import {Margin} from "../../types/Margin";

defineProps({
  text:String,
  width:{
    type:Number,
    default:145,
  },
  height:{
    type:Number,
    default: 60
  },
  borderRadius:{
    type:Number,
    default:30
  },
  fontSize:{
    type:Number,
    default:28
  },
  fontWeight:{
    type:Number,
    default:500
  },
  backgroundColor:{
    type:String,
    default:'#317aff'
  },
  focusBackgroundColor:{
    type:String,
    default:'#317aff'
  },
  color:{
    type:String,
    default:'#ffffff'
  },
  focusColor:{
    type:String,
    default:'#ffffff'
  },
  border:{
    type:Object as PropType<Border>,
    default:()=>({
      width:2,
      color:'#E3E3E3'
    })
  },
  margin:{
    type:Object as PropType<Margin>,
    default:()=>({
      left:10,
      right:10,
      top:0,
      bottom:0
    })
  },
  focusScale:{
    type:Number,
    default:1
  },
  icon:{
    type:String,
    default:''
  },
  flexDirection:{
    type:String,
    default:'row'
  },
  iconStyle:{
    type:Object,
    default:()=>({
      width:20,
      height:15,
      borderRadius:0
    })
  }
})
const buttonRef=ref()
function requestFocus(){
  buttonRef.value.requestFocus()
}
defineExpose({
  requestFocus
})
</script>

<template>
  <qt-button :focusScale="focusScale"
             :icon="icon"
             :focusIcon="icon"
             :iconStyle="iconStyle"
    :text="text"
    :buttonStyle="{width,height,backgroundColor,focusBackgroundColor,borderRadius,
    borderWidth:border.width,borderColor:border.color,
    marginLeft:margin.left,marginRight:margin.right,marginTop:margin.top,marginBottom:margin.bottom,
    flexDirection:flexDirection}"
    :textStyle="{fontSize,color,fontWeight,focusColor}"
             ref="buttonRef"
  />
</template>

<style scoped>
</style>
